<template>
    <fieldset>
        <legend>sub-sub-child</legend>
        <h1>ref:{{ num }}</h1>
        <h1>reactive:{{ num2 }}</h1>
        <button @click="handleRef">点击修改ref</button>
        <button @click="handleReactive">点击修改reactive</button>

        <h2>ref复杂类型:{{ hobby }}</h2>

    </fieldset>
</template>
<script setup>
import {ref, reactive, defineExpose, toRefs} from "vue"

//区别:1.reactive不能去响应基本数据类型的变化,但是ref可以 2.ref在逻辑层赋值或者使用的时候,需要.value

//使用ref

//原始类型(基本数据类型)

//思考:ref复杂类型的数据能否解构,能不能响应视图
let num = ref(40)

let person = ref({
    hobby: '吃喝玩乐,拒绝赌拒绝毒'
})

let {hobby} = toRefs(person.value);
console.log(hobby)

//使用reactive

//原始类型(基本数据类型)
let num2 = reactive(50)

//声明两个函数

let handleRef = () => {
    num.value = 50
    person.value.hobby = '学习'
}

let handleReactive = () => {
    num2 = 60
}


//给当前的组件声明一些可以暴露给其它组件的属性

defineExpose({
    a: 30,
    b: 50
})

</script>